<template>
  <m-layout type="primary" class="score">
    <mt-header slot="header" title="选择测试维度&内容">
      <m-header-back slot="left"/>
    </mt-header>
    <div slot="body">
      <m-section :border-bottom="false">
        <!-- <div class="" style="position: relative;">dsadsa
          <i class="mint-cell-allow-right"></i>
        </div> -->
        <div class="mint-cell">
          <div class="mint-cell-wrapper">
            <select class="select-item" v-model="testWD" @change="handleSelectWD()">
              <option v-for="(item, index) in testWDArr" :key="index" :value="item">{{item.categoryName}}</option>
            </select>
            <i class="mint-cell-allow-right"></i>
          </div>
        </div>
        <div class="mint-cell">
          <div class="mint-cell-wrapper">
            <select class="select-item" v-model="testNR" @change="handleSelectNR($event)">
              <option v-for="(item, index) in testNRArr" :key="index" :value="item">{{item.testContent}}</option>
            </select>
            <i class="mint-cell-allow-right"></i>
          </div>
        </div>
      </m-section>
    </div>
    <div slot="bottom">
      <mt-button type="primary" size="large" :disabled="!nextState" @click="handleNext">下一步</mt-button>
    </div>
    <!-- <mt-popup class="select-popup"
      v-model="popupVisible"
      pop-transitio="popup-fade"
      position="bottom">
      <mt-header class="popup-heder" :title="popupTitle">
        <mt-button slot="left" @click="handleClosePopup()">取消</mt-button>
        <mt-button slot="right" @click="handleSave()">完成</mt-button>
      </mt-header>
      <mt-picker v-if="popupType == 'WD'" class="picker-wrapper" :slots="slotsWD"></mt-picker>
      <mt-picker v-else class="picker-wrapper" :slots="slotsNR"></mt-picker>
    </mt-popup> -->
  </m-layout>
</template>
<script>
import scoreApi from 'api/score'
export default {
  data () {
    return {
      testWD: '',
      testWDArr: [],
      testNR: '',
      testNRArr: []
    }
  },
  computed: {
    orgUserId () {
      // 配置在数据库的字段是 authOrgId 提交接口 均使用 orgUserId 此处做修改
      return this.query.authOrgId
    },
    query () {
      return this.$route.query
    },
    nextState () {
      return this.testWD && this.testNR
    }
  },
  created () {
    this.getCategory()
  },
  methods: {
    getCategory () {
      scoreApi.getCategory({orgUserId: this.orgUserId}).then(({data = []}) => {
        this.testWDArr = data
        if (data.length) {
          let query = this.query
          this.testWD = query.testItemId ? data.find(k => k.id - 0 === query.testItemId - 0) : data[0]
          this.handleSelectWD()
        }
      })
    },
    handleSelectWD () {
      let testItemList = this.testWD.testItemList
      this.testNRArr = testItemList
      if (testItemList.length) {
        this.handleSelectNR()
      }
    },
    handleSelectNR (event) {
      let query = this.query
      let testItemList = this.testWD.testItemList
      if (query.testContentId && !this.$first) { // 路由有数据 且 为第一次
        this.testNR = testItemList.find(k => k.id - 0 === query.testContentId - 0) || testItemList[0]
        this.$first = true
      } else {
        if (!event) this.testNR = testItemList[0] // 非初始化 默认复制
        this.$router.replace({
          name: this.$route.name,
          query: Object.assign({}, query, {
            testItemId: this.testWD.id, // 测试维度id
            testContentId: this.testNR.id // 测试内容id
          })
        })
      }
    },
    handleSave () {
      // 完成
      this.handleClosePopup()
    },
    handleClosePopup () {
      this.popupVisible = false
    },
    handleNext () {
      this.$router.push({
        path: '/score/select/class',
        query: {
          orgUserId: this.orgUserId,
          testItemId: this.testWD.id, // 测试维度id
          testContentId: this.testNR.id, // 测试内容id
          testScoreType: this.testNR.testScoreType // 主观-0 非主观-1
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
  .score{
    .mint-cell{
      .select-item{
        appearance: none;
        display: block;
        width: 100%;
        height: 100%;
        border: none;
        background-color: transparent;
        outline: none;
      }
    }
    .select-popup{
      width: 100%;
      .popup-heder{

      }
    }
  }
</style>
